<template>
    <div>
        <div style="text-align: left;margin-bottom: 20px;">
            <el-button @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button>删除</el-button>
        </div>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="仓库类别编号">
                <el-input v-model="form.wcTypeNumber" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="仓库类别名称" prop="wcTypeName">
                <el-input v-model="form.wcTypeName" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="父级类别">
                <el-cascader v-model="form.wcFatherType" :options="options" :props="props1" style="width: 240px;"
                    clearable @change="handleChange" />

            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import axios from 'axios'
import http from '../../../http.js'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

//生成随机数
// var code = "";
// const randomCode = () => {
//     const randomValue = Math.floor(Math.random() * 1000000);
//     code = randomValue.toString().padStart(6, '0');
//     console.log(code);

// }
const props1 = {
    checkStrictly: true,
}

const form = reactive({
    "warehouseCategoryId": 0,
    "warehouseId": 0,
    "wcTypeNumber": "",
    "wcTypeName": "",
    "wcFatherType": 0,
    "addName": "",
    "addTime": "",
    "updName": "",
    "updTime": "",
    "delName": "",
    "delTime": "",

})

const fill = () => {
    axios.get(http.zblnb + "/erpck/api/WareType/FillWarehouseType?Wid=" + route.query.id).then(res => {
        console.log(res.data);
        form.wcTypeNumber = res.data.data.wcTypeNumber;
        form.wcTypeName = res.data.data.wcTypeName;
        form.wcFatherType = res.data.data.wcFatherType;
        form.warehouseCategoryId = res.data.data.warehouseCategoryId;
        form.warehouseId = res.data.data.warehouseId;
        form.addName = res.data.data.addName;
        form.addTime = res.data.data.addTime;
        form.updName = res.data.data.updName;
        form.updTime = res.data.data.updTime;
        form.delName = res.data.data.delName;
        form.delTime = res.data.data.delTime;

    }).catch(err => {

    })
}



const rules = reactive<FormRules>({
    wcTypeName: [
        { required: true, message: '请填写仓库类别名称', trigger: 'blur' },
        { min: 0, max: 10, message: '长度不能超过10个字符', trigger: 'blur' },
    ],

})


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(form)
            axios.put(http.zblnb + "/erpck/api/WareType/UptWareType", form).then(res => {
                if (res.data.data > 0) {
                    ElMessage.success('修改成功')
                    router.push('/WarehouseType')
                } else {
                    ElMessage.error('修改成功')
                }

            }).catch(err => {

            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

//下拉框
const options = ref([])
const FathrtType = () => {
    axios.get(http.zblnb + "/erpck/api/WareType/GetWareTypeSelectList?id=0").then(res => {
        console.log(res.data.data);
        options.value = res.data.data

    })
}

let fathernum = ref([])
const handleChange = (value: any) => {

    fathernum.value = value
    form.wcFatherType = fathernum.value[0]
}



onMounted(() => {

    FathrtType()
    fill()
})

</script>

<style scoped></style>